import React, { PureComponent } from 'react';
// 引入样式
import './scss/king.scss';
// 引入框架
import { Input, message } from 'antd';
// 引入图标
import { LockTwoTone, SettingFilled, IdcardFilled, VideoCameraFilled, ShopFilled } from '@ant-design/icons';
// 引入请求
import Axios from 'axios';
// 引入接口
import { webSite } from '../website.js';
// 引入路由
import { NavLink } from 'react-router-dom';
export default class King extends PureComponent {
  constructor() {
    super()
    this.state = {
      // 密码框内容
      input: '',
      // 是否显示注意内容
      isKing: false
    }
  }
  // input的输入事件
  handleInput = ({ target }) => {
    let { name, value } = target
    // 设置input和state同步
    this.setState({
      [name]: value
    })
  }
  // 密码框验证
  btnKing = () => {
    const _this = this;
    // 正则判断中文
    let isInt = /[\u4E00-\u9FA5]/g;
    // 判断是否有空格
    let input = this.state.input.replace(/\s+/g, "");
    if (input === '') {
      message.info({ content: '请输入密码', className: 'bulletChatMessage' });
      return;
    }
    // 判断是否有中文
    if (isInt.test(input)) {
      message.info({ content: '密码不能是中文', className: 'bulletChatMessage' });
      return;
    }
    // 向后台发送请求判断密码是否正确
    Axios.create({
      baseURL: `${webSite}:3003`
    }).post("/King", { password: input }).then(err => {
      if (err.data.code === 'K0001') {
        // 把密码存入sess
        sessionStorage.setItem('password', this.state.input);
        _this.setState({
          // 密码正确显示内容
          isKing: true,
          // 清空密码框
          input: ''
        })
      } else {
        _this.setState({
          // 清空密码框
          input: ''
        }, () => {
          message.info({ content: '密码不正确', className: 'bulletChatMessage' });
        })
      }
    }).catch(() => {
      message.error({ content: '请检查您的网络连接', className: 'bulletChatMessage' });
    })
  }
  render () {
    let { isKing } = this.state;
    return (
      <div className='king'>
        {
          isKing ?
            <div className='king_body'>
              {/* 主页的设置 */}
              <NavLink to='/King/home'>
                <div className='king_body_kuai'>
                  <SettingFilled className='king_body_icon' />
                  <p>King Home</p>
                  <p>关于主页的所有设置</p>
                </div>
              </NavLink>
              {/* 交友圈设置 */}
              <NavLink to='/King/friend'>
                <div className='king_body_kuai' style={{ background: '#70c3ff' }}>
                  <IdcardFilled className='king_body_icon' />
                  <p>King Friend</p>
                  <p>交友宣言审核页面</p>
                </div>
              </NavLink>
              {/* 生活界面设置 */}
              <NavLink to='/King/life'>
                <div className='king_body_kuai' style={{ background: '#7f8ea0' }}>
                  <ShopFilled className='king_body_icon' />
                  <p>King Life</p>
                  <p>关于生活界面功能的设置</p>
                </div>
              </NavLink>
              {/* 轻追番设置 */}
              <NavLink to='/King/fanopera'>
                <div className='king_body_kuai' style={{ background: '#89d04f' }}>
                  <VideoCameraFilled className='king_body_icon' />
                  <p>King Fanopera</p>
                  <p>添加或删除番剧</p>
                </div>
              </NavLink>
            </div>
            :
            <div className='king_from'>
              {/* 图标 */}
              <LockTwoTone className='king_LockTwoTone' />
              {/* 密码输入框 */}
              <Input placeholder="需要密码" className='KingInput' value={this.state.input} name='input' onChange={this.handleInput} autoComplete="off" onPressEnter={this.btnKing} maxLength='20' />
            </div>
        }
      </div>
    )
  }
}